import {useEffect, useState} from 'react'
import './index.scss'
import GiftBox from "../GiftBox";
import GiftResult from "../GiftResult";

function OpenBox(props) {
  const [resultVisible, setResultVisible] = useState(props.resultVisible || false)

  useEffect(() => {
    setResultVisible(props.resultVisible || false)
  }, [props])

  const close = () => {
    props.onClose && props.onClose()
    setResultVisible(false)
  }

  return (
    <div className="OpenBox">
      <header>
        <h3><i>CHECK-IN HARIAN</i></h3>
      </header>
      <article>
        {resultVisible ? <GiftResult/> : <GiftBox onClick={setResultVisible.bind(this, true)}/>}
      </article>
      <footer>
        <button className="close-btn" onClick={close}/>
      </footer>
    </div>
  )
}

export default OpenBox
